<template>
  <!-- 背景图 -->
  <div class="a1">
    <!-- 主体 -->
    <div class="a2">
      <img class="tupian1" src="../assets/V2a9ClSXRnWdXJVoWGlY9Q.png" alt="" />
      <div class="a3">
        <div class="b1">品牌介绍</div>
        <div class="b2">REMICONE</div>
        <div class="b3" style="color: #ff0000; font-size: 12px">裸</div>
        <div class="b4" style="color: #ff0000; font-size: 12px">霜</div>
        <div class="b5" style="color: #ff0000; font-size: 12px">乳</div>
        <img class="tupian2" src="../assets/hjhj_14.png" alt="" />
        <div class="b6">
          {{ wenzi1 }}
        </div>
        <div class="anniu">
          <el-button type="danger" plain>MORE+</el-button>
        </div>
      </div>
    </div>
    <img class="tupian3" src="../assets/555555_03.png" alt="" />
    <div class="wenzi2">
      {{ wenzi2 }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wenzi1:
        "REMICONE继天然牛乳软冰淇淋、手作茶概念之后,2019年再次升级,全新第三代“鲜奶店”概念诞生。此次品牌的更迭,在原来魔法乌云冰淇淋的基础上,均衡鲜奶概念,延续健康/天然/优质的品质,提炼“裸、霜、乳”三大产品特性。REMICONE从魔法乌云冰淇淋的诞生,到霜淇淋的进阶,冰淇淋、杂粮、鲜奶、鲜果等奇妙组合,大胆创新,而此次胶囊杯的诞生,代表着REMICONE饮品系列的升级和品质的更迭,鲜奶和鲜果的大量使用,拒绝多余添加剂成分,突出了“鲜奶”的品牌优势和产品系列的统一性,并最大程度地保留了产品的天然味道和健康品质。",
      wenzi2: "REMICONE 鲜制冰淇淋 & 鲜奶店，创造有趣的“裸味道”！！",
    };
  },
};
</script>

<style lang="scss">
//图片1关键帧
@keyframes tupian1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(290px);
  }
}
//图片2关键帧
@keyframes tupian2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-400px);
  }
}
//图片3关键帧
@keyframes tupian3 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(390px);
  }
}
//文字2关键帧
@keyframes wenzi2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-580px);
  }
}
//按钮关键帧
@keyframes anniu {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100px);
  }
}
//小字关键帧
@keyframes b1 {
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}
.b1,
.b2,
.b3,
.b4,
.b5 {
  animation: b1 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.wenzi2 {
  color: #fa7b7a;
  position: absolute;
  top: 725px;
  left: 1400px;
  animation: wenzi2 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.tupian1 {
  width: 603px;
  height: 578px;
  position: absolute;
  top: 130px;
  left: 0px;
  animation: tupian1 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.tupian2 {
  position: absolute;
  top: 250px;
  left: 1205px;
  animation: tupian2 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.tupian3 {
  position: absolute;
  left: 300px;
  top: 700px;
  animation: tupian3 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.a1 {
  background: url(../assets/sfsdfds00001.png);
  position: absolute;
  width: 100%;
  height: 100%;
}
.a2 {
  position: relative;
}
.b1 {
  font-size: 24px;
  color: #333333;
  position: absolute;
  top: 345px;
  left: 875px;
}
.b2 {
  position: absolute;
  top: 355px;
  left: 990px;
  color: #808080;
}
//裸
.b3 {
  position: absolute;
  top: 363px;
  left: 1159px;
}
//霜
.b4 {
  position: absolute;
  top: 363px;
  left: 1219px;
}
//乳
.b5 {
  position: absolute;
  top: 363px;
  left: 1282px;
}
.b6 {
  font-size: 14px;
  width: 550px;
  line-height: 27px;
  position: absolute;
  top: 400px;
  left: 890px;
}
.anniu {
  position: absolute;
  top: 605px;
  left: 1513px;
  animation: anniu 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
</style>
